<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram and Graph</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="750"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 8; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Draw Figure 2.1 ---
        function drawFig1() {
            ctx.save();
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 1.5;

            // --- Main components ---
            const clampY = 100;
            const stripStartX = 150;
            const stripEndX = 450;
            const stripThickness = 6;
            const loadSize = 30;
            const displacement = 40;

            // Clamp
            ctx.fillStyle = '#d3d3d3';
            ctx.fillRect(stripStartX - 50, clampY - 20, 50, 40);
            ctx.strokeRect(stripStartX - 50, clampY - 20, 50, 40);

            // Metal Strip (bent)
            ctx.beginPath();
            ctx.moveTo(stripStartX, clampY - stripThickness / 2);
            ctx.lineTo(stripStartX, clampY + stripThickness / 2);
            ctx.quadraticCurveTo((stripStartX + stripEndX) / 2, clampY + displacement * 0.4 + stripThickness / 2, stripEndX, clampY + displacement + stripThickness / 2);
            ctx.lineTo(stripEndX, clampY + displacement - stripThickness / 2);
            ctx.quadraticCurveTo((stripStartX + stripEndX) / 2, clampY + displacement * 0.4 - stripThickness / 2, stripStartX, clampY - stripThickness / 2);
            ctx.fillStyle = 'black';
            ctx.fill();

            // Load Mass M
            ctx.fillStyle = '#d3d3d3';
            ctx.fillRect(stripEndX, clampY + displacement - loadSize/2 + stripThickness/2, loadSize, loadSize);
            ctx.strokeRect(stripEndX, clampY + displacement - loadSize/2 + stripThickness/2, loadSize, loadSize);


            // Dashed line for horizontal position
            ctx.beginPath();
            ctx.setLineDash([5, 5]);
            ctx.moveTo(stripStartX, clampY);
            ctx.lineTo(stripEndX + loadSize/2, clampY);
            ctx.stroke();
            ctx.setLineDash([]);
            
            // Dashed box for original position of load
            ctx.beginPath();
            ctx.setLineDash([5, 5]);
            ctx.strokeRect(stripEndX, clampY - loadSize/2, loadSize, loadSize);
            ctx.setLineDash([]);


            // Displacement 's'
            const s_arrow_x = stripEndX + loadSize + 20;
            ctx.beginPath();
            drawArrow(ctx, s_arrow_x, clampY, s_arrow_x, clampY + displacement);
            ctx.moveTo(s_arrow_x, clampY + displacement); // Start second arrow from bottom
            drawArrow(ctx, s_arrow_x, clampY + displacement, s_arrow_x, clampY);
            ctx.stroke();
            
            // --- Labels ---
            ctx.font = '16px Arial';
            ctx.textAlign = 'left';
            ctx.fillStyle = 'black';

            // clamp label
            ctx.beginPath();
            ctx.moveTo(110, 50);
            ctx.lineTo(110, 80);
            ctx.stroke();
            ctx.fillText('clamp', 60, 45);

            // metal strip label
            ctx.fillText('metal strip', 250, 160);

            // load mass M label
            ctx.fillText('load', stripEndX + loadSize + 5, clampY + displacement + 5);
            ctx.fillText('mass M', stripEndX + loadSize + 5, clampY + displacement + 25);
            
            // s label
            ctx.fillText('s', s_arrow_x + 10, clampY + displacement / 2);

            // Figure label
            ctx.textAlign = 'center';
            ctx.fillText('Fig. 2.1', 300, 220);

            ctx.restore();
        }

        // --- Draw Figure 2.2 ---
        function drawFig2() {
            ctx.save();
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 1;

            // Graph parameters
            const graphX = 80;
            const graphY = 300;
            const graphWidth = 460;
            const graphHeight = 400;
            const xMin = -1.0, xMax = 1.0;
            const yMin = 0, yMax = 4.0;
            const xOrigin = graphX + (0 - xMin) / (xMax - xMin) * graphWidth;
            const yOrigin = graphY + graphHeight;
            
            // Helper functions to map data to canvas coordinates
            const toX = (a) => graphX + ((a - xMin) / (xMax - xMin)) * graphWidth;
            const toY = (s) => graphY + graphHeight - ((s - yMin) / (yMax - yMin)) * graphHeight;

            // Draw grid
            ctx.strokeStyle = '#d3d3d3';
            ctx.lineWidth = 0.5;
            // Vertical grid lines
            for (let a = xMin; a <= xMax; a += 0.02) {
                ctx.beginPath();
                ctx.moveTo(toX(a), graphY);
                ctx.lineTo(toX(a), graphY + graphHeight);
                ctx.stroke();
            }
            // Horizontal grid lines
            for (let s = yMin; s <= yMax; s += 0.1) {
                ctx.beginPath();
                ctx.moveTo(graphX, toY(s));
                ctx.lineTo(graphX + graphWidth, toY(s));
                ctx.stroke();
            }

            // Draw axes
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 1.5;
            // Y-axis
            ctx.beginPath();
            ctx.moveTo(xOrigin, graphY);
            ctx.lineTo(xOrigin, graphY + graphHeight);
            ctx.stroke();
            // X-axis
            ctx.beginPath();
            ctx.moveTo(graphX, yOrigin);
            ctx.lineTo(graphX + graphWidth, yOrigin);
            ctx.stroke();

            // Draw ticks and labels
            ctx.font = '14px Arial';
            ctx.fillStyle = 'black';
            // Y-axis ticks and labels
            ctx.textAlign = 'right';
            for (let s = yMin; s <= yMax; s += 0.2) {
                 ctx.beginPath();
                if (s % 1 === 0) {
                     ctx.moveTo(xOrigin - 5, toY(s));
                     ctx.lineTo(xOrigin, toY(s));
                     ctx.stroke();
                     if (s > 0) ctx.fillText(s.toFixed(1), xOrigin - 10, toY(s));
                }
            }
            
            // X-axis ticks and labels
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            for (let a = xMin; a <= xMax; a += 0.2) {
                ctx.beginPath();
                ctx.moveTo(toX(a), yOrigin);
                ctx.lineTo(toX(a), yOrigin + 5);
                ctx.stroke();
                if (Math.abs(a) > 1e-9) { // Avoid labeling 0 twice
                    ctx.fillText(a.toFixed(1), toX(a), yOrigin + 8);
                }
            }
            ctx.fillText('0', xOrigin, yOrigin + 8);

            // Axis titles
            ctx.save();
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.translate(graphX - 45, graphY + graphHeight / 2);
            ctx.rotate(-Math.PI / 2);
            ctx.fillText('s / cm', 0, 0);
            ctx.restore();

            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText('a / ms\u207B\u00B2', graphX + graphWidth / 2, yOrigin + 30);
            
            // Plot the line s = -2a + 2.0
            // Choose two points on the line to draw it
            const a1 = -0.9;
            const s1 = -2.0 * a1 + 2.0; // s = 1.8 + 2.0 = 3.8
            const a2 = 0.9;
            const s2 = -2.0 * a2 + 2.0; // s = -1.8 + 2.0 = 0.2
            
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';
            ctx.moveTo(toX(a1), toY(s1));
            ctx.lineTo(toX(a2), toY(s2));
            ctx.stroke();

            // Figure label
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.font = '16px Arial';
            ctx.fillText('Fig. 2.2', 300, 750);

            ctx.restore();
        }

        // Execute drawing functions
        drawFig1();
        drawFig2();

    </script>
</body>
</html>